<template>
<view>
<image src="/static/images/bg-panel-sign.jpg" style="width:100%;"></image>
<view class="header padding header-month">  
    <view class="justify-content">
    <view class="header-left">
    <image :src="userInfo.head_pic" class="head-image"></image>
    <view class="header-left-text text-color">{{userInfo.nickname}}</view>
    </view>
      <view class="header-right">
    <view class="header-left-text text-color">本月已获 : {{data.info.this_month||0}}分</view>
    <view class="header-left-text text-color">累计总积分 : {{data.info.cumtrapz||0}}分</view>
    </view>
</view>

<image class="header-sing-img" v-if="!show_sign" @tap.stop="clickSign" src="/static/images/sign.png" :style="'background-position-x:' + isSign + ';'">
</image>
<image class="header-sing-img" v-else @tap.stop="clickSign" src="/static/images/is_sign.png" :style="'background-position-x:' + isSign + ';'">
    <text class="header-sing-text">+{{data.display_sign||0}}积分</text>
</image>


<view class="header-broder">本月已连续签到{{data.info.sign_count||0}}天,连续签到{{data.config.sign_signcount||0}}天即得{{data.jifen||0}}积分</view>
</view>

<view class="no-data">
    <view class="no-data-title center-year">{{year}}年{{month}}月签到</view>
      <view class="space-around">
            <view v-for="(item, index) in weekDay" :key="index" class>{{item}}</view>       
      </view>
        <view class="space-around space-around-day">
            <view v-for="(item, index) in oneWeek" :key="index" :style="'color:' + (item.day == item.selected?'red':'') + ';'">{{item.day}}</view>       
      </view>
        <view class="space-around space-around-day">
            <view v-for="(item, index) in twoWeek" :key="index" :style="'color:' + (item.day == item.selected?'red':'') + ';'">{{item.day}}</view>       
      </view>
        <view class="space-around space-around-day">
            <view v-for="(item, index) in threeWeek" :key="index" :style="'color:' + (item.day == item.selected?'red':'') + ';'">{{item.day}}</view>       
      </view>
        <view class="space-around space-around-day">
            <view v-for="(item, index) in fourWeek" :key="index" :style="'color:' + (item.day == item.selected?'red':'') + ';'">{{item.day}}</view>       
      </view>
      <view class="space-around space-around-day">
            <view v-for="(item, index) in fiveWeek" :key="index" :style="'color:' + (item.day == item.selected?'red':'') + ';'">{{item.day}}</view>       
      </view>
       <view class="space-around space-around-day" v-if="sixWeek.length>0">
            <view v-for="(item, index) in sixWeek" :key="index" class :style="'color:' + (item.day == item.selected?'red':'') + ';'">{{item.day}}</view>       
      </view>
</view>


<view class="foot">
<view class>签到规则:</view>
<view class>1.用户每日签到可获取积分奖励，连续签到相应天数可额外获得积分奖励；</view>
<view class>2.签到送积分活动长期有效；</view>
<view class>3.本活动最终解释权归{{store_name}}商家所有。</view>
</view>

<view class="core" @tap.stop="back">返回个人中心</view>
</view>
</template>

<script>
// pages/user/sign_in/sign_in.js
var app = getApp();
var setting = app.globalData.setting;
var request = app.globalData.request;
const date = new Date();
const days = [];
var thisMon = date.getMonth();
var thisDay = date.getDate();
var totalDay = mGetDate(date.getFullYear(), thisMon);
function mGetDate(year, month) {
  var d = new Date(year, month, 0);
  return d.getDate();
}

export default {
  data() {
    return {
      store_name: setting.appName,
      isSign: 0,
      sign: false,
      sign_integral: 0,
      show_sign: false,
      year: date.getFullYear(),
      month: thisMon,
      day: thisDay,
      dayArr: days,
      weekDay: ["日", "一", "二", "三", "四", "五", "六"],
      oneWeek: [],
      twoWeek: [],
      threeWeek: [],
      fourWeek: [],
      fiveWeek: [],
      sixWeek: [],
      data: [],
      userInfo: ""
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    var date = that.year + "/" + that.month + "/" + 1; //获取每个月的第一天

    var d = new Date(date);
    var weekDay = that.weekDay;
    var day = weekDay[d.getDay()]; //判断每月第一天是星期几

    var appendNum = that.addDay(day);

    if (appendNum > 0) {
      for (let i = 0; i < appendNum; i++) {
        that.dayArr.unshift('');
      }
    } //先预设值，加速加载


    if (app.globalData.userInfo) {
      that.setData({
        userInfo: app.globalData.userInfo
      });
    }

    that.getData();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    getData: function () {
      var that = this;
      console.log(that.dayArr);
      request.get('/api/User/sign', {
        success: function (res) {
          var status = false;
          var arr = res.data.result.str.split(',');

          for (var i = 0; i < that.dayArr.length; i++) {
            var str = String(that.dayArr[i]['day']);

            if (that.dayArr[i] && arr.indexOf(str) != -1) {
              if (arr.indexOf(that.day.toString()) != -1) {
                status = true;
              }

              that.dayArr[i]['selected'] = that.dayArr[i]['day'];
            }
          }

          that.setData({
            data: res.data.result,
            sign: status ? status : false,
            show_sign: status ? status : false,
            isSign: status ? '-4.266666rem' : ''
          });
          that.show();
        },

        fail() {
          that.show();
        }

      });
    },
    show: function () {
      var that = this;

      for (let y = 0; y < 7; y++) {
        that.oneWeek.push(that.dayArr[y]);
      }

      for (let u = 7; u < 14; u++) {
        that.twoWeek.push(that.dayArr[u]);
      }

      for (let g = 14; g < 21; g++) {
        that.threeWeek.push(that.dayArr[g]);
      }

      for (let t = 21; t < 28; t++) {
        that.fourWeek.push(that.dayArr[t]);
      }

      for (let k = 28; k < 35; k++) {
        if (that.dayArr[k]) {
          that.fiveWeek.push(that.dayArr[k]);
        }
      }

      if (that.dayArr.length - 28 > 0) {
        for (let h = 35; h < that.dayArr.length; h++) {
          that.sixWeek.push(that.dayArr[h]);
        }

        that.setData({
          sixWeek: that.sixWeek
        });
      }

      that.setData({
        oneWeek: that.oneWeek,
        twoWeek: that.twoWeek,
        threeWeek: that.threeWeek,
        fourWeek: that.fourWeek,
        fiveWeek: that.fiveWeek,
        store_name: setting.appName
      });
    },
    clickSign: function (e) {
      var that = this;

      if (!this.sign) {
        request.post('/api/User/user_sign', {
          data: {
            date: this.year + '-' + this.month + '-' + this.day
          },
          success: function (res) {
            app.globalData.showSuccess('签到成功', function () {
              that.setData({
                oneWeek: [],
                twoWeek: [],
                threeWeek: [],
                fourWeek: [],
                fiveWeek: [],
                sixWeek: []
              });
              that.getData();
            });
          }
        });
      } else {
        app.globalData.showWarning('今日已签到');
      }
    },
    back: function () {
      uni.navigateBack({
        delta: 1
      });
    },

    addDay(e) {
      switch (e) {
        case '一':
          return 1;

        case '二':
          return 2;

        case '三':
          return 3;

        case '四':
          return 4;

        case '五':
          return 5;

        case '六':
          return 6;

        default:
          return 0;
      }
    }

  }
};
</script>
<style>
page{
    background-color: #fff;
}
.text-color{
    color:#fff;
}
.padding{
    padding:20rpx;
}
.header .head-image{
    width: 40px;
    height: 40px;
    border-radius:18px;

}
.header-left{
    display:flex;
}
.header-left-text{
    font-size:0.7rem;
    margin-top:25rpx;
    margin-left:10px;
    text-align: right;
}
.header-right{
    line-height:16rpx;
}
.header-broder {
    text-align: center;
    color:#fff;
    font-size:24rpx;
    position:absolute;
    top:290rpx; 
    width:100%;
    letter-spacing:2rpx;
}

.header-sing-img{
    position: absolute;
    top: 2.765333rem;
    left: 50%;
    margin-left: -2.133333rem;
    width: 4.966666rem;
    height: 4.966666rem;
    background-size: 8.533332rem  4.266666rem;
}
.header-sing-text{
    position:absolute;
    top:90rpx;
    width:100%;
    text-align:center;
    font-size:.63rem;
    color:red;
}


.justify-content{
    justify-content:space-between;
    display:flex;
}

.space-around{
    display:flex; 
}
.space-around view{
       width:14%;
}

.space-around-day{
    color:darkgray;
}

.center-year{
    border-bottom:1px solid #f3f3f3;
    padding:16rpx;
    color:#ff6a00;
}

.foot{
    font-size:24rpx;
    line-height:50rpx;
    padding:20rpx;
}

.core{
    text-align: center;
    color:#fff;
    background-color:#ff6a00;
    border-radius: 10rpx;
    margin: 20rpx auto;
    line-height: 90rpx;
    font-size: 28rpx;
    width: 710rpx;
    height: 90rpx;
}
.header-month{
    position:absolute;
    top:10px;
    width:95%;        
}
</style>